@import url('https://fonts.googleapis.com/css?family=Sora');
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
  .nav-primary {
    @apply hover:bg-gradient-to-r from-green-deep to-toxic rounded-lg px-3 py-2 text-black hover:text-white dark:text-white font-medium ;
  }
  .title-primary {
    @apply text-stone-900 dark:text-white text-xl 2xl:text-4xl font-bold 2xl:pt-6;
  }
  .content-short {
    @apply text-neutral-400 dark:text-dmcontent font-normal md:text-sm 2xl:text-lg pb-5;
  }
  .info-short {
    @apply text-neutral-500 dark:text-dmcontent font-normal md:text-sm 2xl:text-lg pb-5;
  }
  .container-box {
    @apply cursor-pointer bg-white border-gray-200 border-[1px] dark:bg-dmbgblackie dark:border-neutral-500 dark:border-[1px] row-span-1 col-span-1 rounded-lg shadow-xl mb-5 lg:mb-0 hover:-translate-y-2 ease-in-out duration-200;
  }
  .body-container {
    @apply w-full container mx-auto;
  }
  .filter-btn {
    @apply mr-4 mb-4 hover:text-white px-3 py-2 border-2 hover:bg-gradient-to-r from-green-deep to-toxic duration-300 rounded-lg border-lighttoxic dark:border-2 dark:border-toxic dark:bg-transparent text-green-deep bg-lighttoxic dark:text-white font-bold;
  }
  .filter-btn.active {
    @apply bg-gradient-to-r from-green-deep to-toxic text-white
  }
  .card-tag {
    @apply transition bg-orange-600 duration-300 ease-in-out font-normal text-white rounded-md inline ml-4 px-2 py-0.5 dark:bg-dmorange;
  }
  .navbar {
    @apply rounded bg-transparent py-2 sticky top-0
  }
  .featureimg {
    @apply object-cover w-full lg:h-[15h] md:h-[25vh] sm:h-[45vh]
  }
  .pagetitle {
    @apply bg-clip-text font-bold bg-gradient-to-tr from-green-500 via-toxic to-yellow-500 text-transparent text-5xl 2xl:text-7xl 2xl:pt-6 md:text-7xl
  }
  .subtitle {
    @apply text-2xl 2xl:text-4xl 2xl:pt-6 md:text-4xl font-medium text-neutral-600 dark:text-neutral-200
  }
  .textlink {
    @apply text-neutral-500 hover:font-bold underline ease-in-out duration-300 dark:hover:text-neutral-100
  }
  .countnum {
   @apply ml-auto md:block hidden rounded-full bg-lighttoxic text-green-deep px-2 py-0.5 font-medium tracking-wide text-sm
  }
  .sidebar-row{
    @apply text-neutral-400 hover:text-neutral-100 relative flex h-11 flex-row items-center border-transparent pr-6 focus:outline-none rounded-lg dark:text-white hover:bg-gradient-to-r from-green-deep to-toxic
  }
  .sidebar-icon {
    @apply w-6 h-6 text-neutral-600 transition duration-200 dark:text-neutral-300 group-hover:text-white dark:group-hover:text-white ease-in-out
  }
  .sidebar-text {
    @apply ml-2 font-semibold truncate text-lg tracking-wide text-neutral-600 transition duration-200 dark:text-neutral-300 group-hover:text-white dark:group-hover:text-white ease-in-out
  }
  .threed-box {
     @apply items-center justify-between flex-row rounded-lg p-6 bg-white dark:bg-dmbgblackie dark:border-neutral-500 dark:border-[1px] ring-1 ring-slate-900/5 shadow-lg hover:-translate-y-2 hover:bg-toxic ease-in-out duration-300
  }
  .threed-title {
    @apply text-neutral-600 dark:text-neutral-300 group-hover:text-white font-bold text-xl mt-2
  }
  .threed-content {
    @apply text-neutral-400 dark:text-dmcontent group-hover:text-white font-normal md:text-sm 2xl:text-lg mt-2
  }
}

.navbar{
  z-index: 100 !important;
}
body {
  margin: 0;
  font-family: 'Sora', sans-serif;  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.eachcard {
height: 100% !important;
}
.eachcard::after {
  position: absolute;
  display: block;
  top: 2px;
  left: 2px;
  width: 24px; 
  height: 24px;
  text-align: center;
  line-height: 24px;
  background-color: #000;
  color: #fff;
  content: counter(count);
}
.pin-container {
  margin:0;
  padding: 0;
  background-color: aqua;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(auto-fill, 250px);
  grid-auto-rows: 10px;
}
.goTop {
  display: block;
  position: fixed;
  bottom: 8%;
  left: 85%;
  cursor: pointer;
  line-height: 30px;
}
.goTopHidden {
  display: none;
}
.toggleIcon {
  position: fixed;
  bottom: 2%;
  left: 85%;
  line-height: 30px;
}
